<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>商品模板表</title>
		<#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.css">
    <script src="${request.contextPath}/statics/libs/bootstrap-table.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.bootstrap3.js"></script>
    <script src="${request.contextPath}/statics/plugins/treegrid/jquery.treegrid.extension.js"></script>
    <script src="${request.contextPath}/statics/plugins/treegrid/tree.table.js"></script>
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">

        <div class="grid-btn">
            <form class="form-inline" role="form">
                <a class="btn btn-default btn-sm" @click="reset"><i class="fa fa-refresh"></i></a>
                <div class="form-group">
                    <input type="text" class="form-control input-sm" v-model="q.templateId" @keyup.enter="query" placeholder="模板id">
                </div>&nbsp;&nbsp;&nbsp;
                <div class="form-group">
                    <input type="text" class="form-control input-sm" v-model="q.templateName" @keyup.enter="query" placeholder="名称">
                </div>&nbsp;&nbsp;&nbsp;
                <a class="btn btn-default btn-sm"  @click="query"><i class="fa fa-search"></i>&nbsp;查询</a>
                <#if shiro.hasPermission("goods:goodstemplate:save")>
                    <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
                </#if>
                <#if shiro.hasPermission("goods:goodstemplate:update")>
                    <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
                </#if>
                <#if shiro.hasPermission("goods:goodstemplate:delete")>
                    <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                </#if>
            </form>

        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal" style="width: 100%">
            <div class="form-group">
            <div class="col-sm-2 control-label">模板名称</div>
                <div class="col-sm-2">
                    <input type="text" class="form-control" v-model="goodsTemplate.templateName" placeholder="模板名称"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">三级分类</div>
                <div class="col-sm-2">
                    <!--<span v-if="goodsTemplate.templateId == undefined">-->
                        <input type="text" class="form-control" v-model="goodsTemplate.categoryName" @click="goodsCategoryTree" readonly="true" placeholder="请选择分类"/>
                    <!--</span>-->
                    <!--<span v-else>-->
                        <!--<input type="text" class="form-control" v-model="goodsTemplate.categoryName" readonly="true"/>-->
                    <!--</span>-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">是否启用模板</div>
                <div class="col-sm-2">
                    <!--<input type="text" class="form-control" v-model="goodsTemplate.dateTemp" placeholder="模板名称"/>-->
                    <select class="form-control" v-model="goodsTemplate.dateTemp">
                        <option class="form-control"  value="true">暂不启用</option>
                        <option class="form-control"  value="false">启用</option>
                    </select>
                </div>
            </div>
            <!--<div class="form-group" style="display:none">-->
                <!--<div class="col-sm-2 control-label">属性id集合</div>-->
                <!--<div class="col-sm-2">-->
                    <!--<input type="text" class="form-control" v-model="goodsTemplate.attributeIds" readonly="true"/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<div class="col-sm-2 control-label">属性名集合</div>-->
                <!--<div class="col-sm-2">-->
                    <!--<input type="text" class="form-control" v-model="goodsTemplate.attributeNames" @click="selectAttributeNames" readonly="true" placeholder="点击选择规格属性"/>-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <div class="col-sm-2 control-label">是否删除</div>
                <div class="col-sm-2">
                    <!--<input type="text" class="form-control" v-model="goodsTemplate.disabled" placeholder="是否删除"/>-->
                    <select class="form-control" v-model="goodsTemplate.disabled">
                        <option class="form-control"  value="true">已删除</option>
                        <option class="form-control"  value="false">未删除</option>
                    </select>
                </div>
            </div>
            <!--<div class="form-group" style="display:none">-->
                <!--<div class="col-sm-2 control-label">创建时间</div>-->
                <!--<div class="col-sm-10">-->
                    <!--<input type="text" class="form-control" v-model="goodsTemplate.createTime" placeholder="创建时间"/>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="form-group">-->
                <!--<div class="col-sm-2 control-label">规格属性选择</div>-->
                <!--<div class="col-sm-10">-->
                    <!--<span v-for="(goodsAttribute,index) in goodsAttributes">-->
                        <!--<input type="checkbox" v-bind:value="goodsAttribute.attributeId" v-model="selected"  @click="updateAttribute(event,goodsAttribute.attributeId,goodsAttribute.attributeName)">-->
                        <!--<label>{{goodsAttribute.attributeName}}</label>-->
                    <!--</span>-->
                    <!--<span>Selected:{{selected}}</span>-->
                <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <div class="col-sm-2 control-label">规格属性选择</div>
                <div class="col-sm-10">
                        <el-select v-model="selectedAttributeList" style="width: 50%" value-key="attributeId" multiple placeholder="请选择">
                            <el-option
                                    v-for="goodsAttribute in goodsAttributes"
                                    :key="goodsAttribute.attributeId"
                                    :label="goodsAttribute.attributeName"
                                    :value="goodsAttribute">
                            </el-option>
                        </el-select>
                        <!--影响工艺计价选择:-->
                        <!--<el-select v-model="influenceCraftList" value-key="attributeId" multiple placeholder="请选择">-->
                            <!--<el-option-->
                                    <!--v-for="selectedAttribute in selectedAttributeList"-->
                                    <!--:key="selectedAttribute.attributeId"-->
                                    <!--:label="selectedAttribute.attributeName"-->
                                    <!--:value="selectedAttribute">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label" ><a @click="loadOption">加载规格绑定选项</a></div>
                <div class="col-sm-10">
                        <el-table border :data="tempOptionsList" style="width: 80%">
                            <el-table-column prop="attributeName" label="规格名" width="100px"></el-table-column>
                            <el-table-column label="规格选项值" >
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.selectedOptionList"  style="width: 100%" multiple placeholder="请选择">
                                        <el-option
                                                v-for="tempOption in scope.row.goodsOptionList"
                                                :key="tempOption.optionId"
                                                :label="tempOption.optionName"
                                                :value="tempOption.optionId">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <!--<el-table-column prop="attributeName" label="是否影响商品总价" width="180"></el-table-column>-->
                            <el-table-column label="是否影响商品总价" width="180px">
                                <template slot-scope="scope">
                                    <el-switch
                                            style="display: block"
                                            v-model="scope.row.influenceCraft"
                                            active-color="#87CEFF"
                                            inactive-color="#F2F2F2"
                                            active-text="影响"
                                            inactive-text="不影响">
                                    </el-switch>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--<el-select v-model="tempOptions.selectedOptionList"  multiple placeholder="请选择">-->
                            <!--{{tempOptions.goodsOptionList}}-->
                            <!--<el-option-->
                                    <!--v-for="tempOption in tempOptions.goodsOptionList"-->
                                    <!--:key="tempOption.optionId"-->
                                    <!--:label="tempOption.optionName"-->
                                    <!--:value="tempOption.optionId">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                            <!--{{tempOptions.attributeName}}:-->
                            <!--<el-select v-model="tempOptions.selectedOptionList"  multiple placeholder="请选择">-->
                                <!--<el-option-->
                                        <!--v-for="tempOption in tempOptions.goodsOptionList"-->
                                        <!--:key="tempOption.optionId"-->
                                        <!--:label="tempOption.optionName"-->
                                        <!--:value="tempOption.optionId">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                            <!--是否影响商品总价:-->
                            <!--<el-switch-->
                                    <!--style="display: block"-->
                                    <!--v-model="tempOptions.influenceCraft"-->
                                    <!--active-color="#87CEFF"-->
                                    <!--inactive-color="#F2F2F2"-->
                                    <!--active-text="影响"-->
                                    <!--inactive-text="不影响">-->
                            <!--</el-switch>-->
                    <!--工艺:-->
                    <!--<template v-for="tempOptions in tempCraftOptionsList">-->
                        <!--<div>-->
                            <!--{{tempOptions.attributeName}}:-->
                            <!--<el-select v-model="tempOptions.selectedOptionList"  multiple placeholder="请选择">-->
                                <!--<el-option-->
                                        <!--v-for="tempOption in tempOptions.goodsOptionList"-->
                                        <!--:key="tempOption.optionId"-->
                                        <!--:label="tempOption.optionName"-->
                                        <!--:value="tempOption.optionId">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                            <!--<el-select v-model="tempOptions.influenceAttributeIds"  multiple placeholder="请选择">-->
                                <!--<el-option-->
                                        <!--v-for="onlyAttribute in onlyAttributeList"-->
                                        <!--:key="onlyAttribute.attributeId"-->
                                        <!--:label="onlyAttribute.attributeName"-->
                                        <!--:value="onlyAttribute.attributeId">-->
                                <!--</el-option>-->
                            <!--</el-select>-->
                        <!--</div>-->
                    <!--</template>-->
                    <el-table border :data="tempCraftOptionsList" style="width: 80%">
                        <el-table-column prop="attributeName" label="工艺名" width="100px"></el-table-column>
                        <el-table-column label="工艺选项值" >
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.selectedOptionList"  style="width: 100%" multiple placeholder="请选择">
                                    <el-option
                                            v-for="tempOption in scope.row.goodsOptionList"
                                            :key="tempOption.optionId"
                                            :label="tempOption.optionName"
                                            :value="tempOption.optionId">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="影响工艺价规格集" width="180px">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.influenceAttributeIds"  multiple placeholder="请选择">
                                    <el-option
                                            v-for="onlyAttribute in onlyAttributeList"
                                            :key="onlyAttribute.attributeId"
                                            :label="onlyAttribute.attributeName"
                                            :value="onlyAttribute.attributeId">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div>
                <div class="col-sm-2 control-label">规格属性排序</div>
                <div class="col-sm-10">
                    <el-table border :data="selectedAttributeList" style="width: 80%">
                        <!--<el-table-column prop="attributeName" label="规格名" width="100px"></el-table-column>-->
                        <el-table-column prop="attributeName" label="规格名" width="100px"></el-table-column>
                        <el-table-column align="center" label="排序" width="100px">
                            <template slot-scope="scope">
                                {{scope.$index+1}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="移动" width="200px">
                            <template slot-scope="scope">
                                <el-button size="small" @click="upOrder(scope.$index)" round>上移</el-button>
                                <el-button size="small" @click="downOrder(scope.$index)" round>下移</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-10">
                    <input type="button" class="btn btn-primary sm" @click="saveOrUpdate" value="确定"/>
                    &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
                </div>
            </div>
        </form>
    </div>
<!-- 选择三级分类 -->
<div id="goodsCategoryLayer" style="display: none;padding:10px;">
    <ul id="goodsCategoryTree" class="ztree"></ul>
</div>
</div>

<script src="${request.contextPath}/statics/js/modules/goods/goodstemplate.js?_${.now?long}"></script>
</body>
</html>